<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
        #root { border: 2px solid blue ;}
        .counter { margin: 15px ; border: 2px solid gray ; min-height: 10px; }
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <h3>作用域插槽( Named Slot)</h3>

    <div id="root">
        <!-- 在 v-slot:slotName 等号之后的 双引号 中 指定 "插槽Prop" 对象的名称 -->
        <kaifamiao-counter v-slot:default="slotProps">
            <p>你已经点击了{{ slotProps.counterValue }}次</p>
        </kaifamiao-counter>
    </div>

    <script src="vue.global.js"></script>

    <script>
        const counter = {
            template: `<div class="counter">
                           <!-- 通过为 slot 绑定 attribute 可以实现向 "插槽内容" 传递数据 -->
                           <!-- 绑定在 slot 元素上的 attribute 被称为 "插槽Prop" ( slot prop ) -->
                           <slot :counter-value="value">
                              当在父组件中通过插槽分发内容时则显示默认内容
                           </slot>
                           <button @click="increase">增加</button>
                           <hr>
                           <button @click="show">访问插槽</button>
                       </div>`,
            data(){
                return { value: 0 }
            },
            methods: {
                increase(){
                    this.value++;
                },
                show(){
                    console.log( this.$slots );
                    console.log( this.$slots.default );
                }
            }
        }
        const options = {
            components: {
                'kaifamiao-counter': counter
            }
        }
        const app = Vue.createApp(options);
        const root = app.mount('#root');
    </script>
    
</body>
</html>